<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础语法4: v-model 双向绑定</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <h1>知识点1: v-model双向绑定</h1>
    
    <h3>1.单行文本框</h3>
    <input type="text" v-model="singleText">
    {{singleText}}
    
    <h3>2.多行文本框</h3>
    <textarea cols="30" rows="10" v-model="multiText"></textarea>{{multiText}}
    
    <h3>3.单选框</h3>
    <h4>单选框在实际中是不能单独使用的，一般是两个及以上要设置一个v-model共用一个变量，那么就可以实现radiogroup的效果</h4>
    <input type="radio" value="A" v-model="radioValue">下

    <input type="radio" value="B" v-model="radioValue">上

    <input type="radio" value="C" v-model="radioValue">吃

    {{radioValue}}
    
    <h3>4.单个复选框单个复选框通常用来true或false的选择</h3>
    <input type="checkbox" v-model="toggleValue">是否天生丽质
    {{toggleValue}}
    
    <h3>5.多个复选框v-model接受数组类型的变量</h3>
    <input type="checkbox" value="漂亮" v-model="checkedValues">A.回眸一笑百媚生

    <input type="checkbox" value="纤细" v-model="checkedValues">B.体轻能为掌上舞

    <input type="checkbox" value="宠爱" v-model="checkedValues">C.三千宠爱在一身

    <input type="checkbox" value="深情" v-model="checkedValues">D.在地愿为连理枝

    {{checkedValues.join(';')}}
    

    
    <h3>6.单项下拉选择框</h3>
    <select v-model="singleSelect">
      <option value="杭州">杭州</option>
      <option value="宁波">宁波</option>
      <option value="金华">金华</option>
      <option value="绍兴">绍兴</option>
      <option value="丽水">丽水</option>
    </select>
    {{singleSelect}}
    

    
    <h3>7.多项下拉选择框</h3>
    <select multiple v-model="multiSelect">
      <option value="1">几处早莺争暖树</option>
      <option value="2">谁家新燕啄春泥</option>
      <option value="3">浅草才能没马蹄</option>
    </select>
    {{multiSelect.join(';')}}
    <!-- 选择的时候要按住ctrl键 -->
    
    <h1>课堂小练习</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密 码: <input type="text" v-model="password"></p>
    <p>确认密码: <input type="text" v-model="password2"></p>
    <input type="radio" value="女" v-model="sex">女
    <input type="radio" value="男" v-model="sex">男

    <p>籍 贯: <select v-model="home">
      <option value="杭州">杭州</option>
      <option value="台州">台州</option>
      <option value="温州">温州</option>
      <option value="湖州">湖州</option>
    </select></p>
    <p>选择的课外课程: <input type="checkbox" value="吉他" v-model="course">吉他
      <input type="checkbox" value="国画" v-model="course">国画
      <input type="checkbox" value="街舞" v-model="course">街舞
      <input type="checkbox" value="书法" v-model="course">书法</p>
    <button @click="submit()">提交</button>
    
    <h1>知识点2:v-model修饰符</h1>
    <h3>1.lazy修饰符  v-model在每次input事件触发后将输入框的值与数据进行同步添加lazy修饰符后,转变成与change事件同步</h3>
    <input type="text" v-model.lazy="text">{{text}}
    <h3>2.如果想自动将用户输入的值转化为数字型，可以加.number修饰符</h3>
    <h3>3.如果想要自动过滤前后的空白字符，可以加.trim修饰符</h3>
    <input type="text" v-model.trim="text">
    {{text + ' nihao'}}
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          singleText: '',
          multiText: '',
          radioValue: '',
          toggleValue: false,
          checkedValues: [],
          singleSelect: '',
          multiSelect: [],
          username: '',
          password: '',
          password2: '',
          sex: '',
          home: '',
          course: [],
          text: ''
        }
      },
      methods: {
        submit() {
          this.check()
          alert('尊敬的' + this.home + this.username + '用户，你是一位' + this.sex + '神，你选择的课程是：' + this.course.join(','))
        },
        check() {
          if (this.password !== this.password2) {
            alert('两次输入密码不一致')
            this.password2 = ''
          }
        }
      }
    }).mount('#app')
  </script>
</body>
</html>
